<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="message.css">
</head>
<body>
  <div>
    <h1>留言板</h1>
    <ul></ul>
    <textarea placeholder="请编辑您的留言"></textarea>
    <button class="sub">发布</button>
  </div>
    <script>
      var sub = document.querySelector(".sub")
      var text = document.querySelector("textarea")
      var ul  = document.querySelector("ul")
      sub.onclick = function()
      {
        var li = document.createElement("li")
        li.innerHTML = text.value
        var btn = document.createElement("button")
        btn.className = "remove"
        btn.innerHTML="删除"
        btn.onclick = function()
        {
          ul.removeChild(this.parentNode)
        }
        li.appendChild(btn)
        ul.insertBefore(li,ul.children[0])
      }

    </script>
</body>
</html>